<template>
  <div id="container">
    <VCharts class="nn" :options="options3"></VCharts>
  </div>
</template>

<script>
import "echarts/extension/bmap/bmap"
import sty from '@/utils/sty'
import arrs from '@/mixin/getScatter'
export default {
  mixins:[arrs],
  data() {
    return {
      options3: {}
    }
  },
  watch:{
        aaa:{
            handler(val){
               this.setOptions2()
            },
            deep:true
        }
    },
  methods: {
    setOptions2() {
      this.options3 = {
        bmap: {
          key: "GqZVYGP82XlR5vizOsz6wlNbGdzKPsZy",
          //绘制的中心点
          center: [116.404, 39.915],
          //缩放比例  在 3到19之间 现在是图例的正中央
          zoom: 5,
          //是否缩放
          roam: true,
          mapStyle: {
            styleJSON: sty.arr
          }
        },
        series: [
          {
            name: "销售额",
            type: "scatter",//散点图
            coordinateSystem: "bmap",//坐标系必须为bmap
            data: this.arrays, //测试的城市数据
            tooltip: {//鼠标移上去的提示
              formatter: function (params, ticket, callback) {

              }
            },
            //定制点的大小 根据销售额的数据定制点的大小
            symbolSize: function (val) {
              //val是 value: [118.78, 32.04, 300]
              return val[2] / 10;
            },
            label: {
              formatter: (data) => {//展示名称和销售额
                return data.name + "-" + data.data.value[2]
              },
              position: "right"
            },
            //点的颜色
            itemStyle: {
              color: "#ddb926"
            },
            //鼠标移上去显示文本
            emphasis: {
              label: {
                show: true
              }
            }
          },
          {
            name: "销售额",
            type: "effectScatter",//散点图
            coordinateSystem: "bmap",//坐标系必须为bmap
            data: this.aaa, //测试的城市数据
            tooltip: {//鼠标移上去的提示
              formatter: function (params, ticket, callback) {
              }
            },
            //定制点的大小 根据销售额的数据定制点的大小
            symbolSize: function (val) {
              //val是 value: [118.78, 32.04, 300]
              return val[2] / 15;
            },
            label: {
              formatter: (data) => {//展示名称和销售额
                return data.name + "-" + data.data.value[2]
              },
              position: "right"
            },
            rippleEffect: {
              brushType: 'stroke',//设置波纹样式
              // color:"red"
            },
            //点的颜色
            itemStyle: {
              color: "purple",
              shadowBlur: 10,
              shadowColor: "#333"
            },
            //鼠标移上去显示文本
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.setOptions2()
  }
}
</script>
<style lang="scss">
#container {
  width: 100%;
  height: 600px;
}

.nn {
  width: 100%;
  height: 100%;
}
</style>  
